﻿@page "/Demo_SvgLive"

<h1>SVG Live</h1>

<p>
	Demo for how to control each part of the SVG, That's helpful for Chart
</p>


<BlazorDomTree OnRootReady="bdtready" />

<br />
<hr />
<br />
Blazor MarkupString mode :
<br />

@((MarkupString)"<svg width=90 height=90 xmlns='http://www.w3.org/2000/svg' version='1.1'> <circle cx='45' cy='45' r='40' stroke='black'  stroke-width='2' fill='green' /></svg>")


@code{

	void bdtready(BlazorDomTree bdt)
	{
		//set svg directly
		bdt.Root.Create("div style='display:inline-block'").InnerHTML = "<svg width=90 height=90 xmlns='http://www.w3.org/2000/svg' version='1.1'>  <circle cx='45' cy='45' r='40' stroke='black'  stroke-width='2' fill='red' /></svg>";


		PlusSvg svg = bdt.Root.Create<PlusSvg>("id='svg1' width=130 height=130 style='background-color:gray'");
		//set svg content
		svg.InnerHTML = "<circle cx='55' cy='55' r='40' stroke='black' stroke-width='2' fill='blue' />";

		bdt.Root.Create("hr");

		//a live svg object
		PlusSvg svg2 = bdt.Root.Create<PlusSvg>("id='svg2' xmlns:xlink='http://www.w3.org/1999/xlink'  width=550 height=360 style='background-color:gray'");
		svg2.Create("defs").InnerHTML = "<filter id='Gaussian_Blur'><feGaussianBlur in='SourceGraphic' stdDeviation='3' /></filter>";

		PlusControl a1 = svg2.Create("svg:a xlink:href='http://blazorplus.com' target=_blank");
		PlusControl c1 = a1.Create("circle cx='100' cy='50' r='50' stroke='black' stroke-width='2' fill='red'");

		svg2.Create("rect x=20 y=20 width='50' height='50' style='fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)' onmouseover='this.style.fill=\"green\"' onmouseout='this.style.fill=\"blue\"'");
		svg2.Create("ellipse cx='300' cy='150' rx='200' ry='80' style='fill:rgb(200,100,50); stroke:rgb(0,0,100);stroke-width:2'");
		svg2.Create("line x1='0' y1='0' x2='300' y2='300' style='stroke:rgb(99,99,99);stroke-width:2'");
		svg2.Create("polygon points='220,100 300,210 170,250' style='fill:#cccccc;stroke:#000000;stroke-width:1'");
		svg2.Create("polyline points='111,90 0,120 20,120 20,140 40,140 40,160' style='fill:white;stroke:red;stroke-width:2'");
		svg2.Create("path d='M250 150 L150 350 L350 350 Z' style='fill:green;stroke:rgb(0,0,100);stroke-width:2;filter:url(#Gaussian_Blur)'");
		svg2.Create("text x='100' y='100' style='font-size:32px;fill:orange'").InnerText("hello");

		//move the c1 when mouse move
		svg2.OnMouseMove((sender, pea) =>
		{
			c1.Attribute("cx", pea.JSEvent.offsetX.ToString());
			c1.Attribute("cy", pea.JSEvent.offsetY.ToString());
		//set a1 as the last node , the upper layer
		svg2.SetChildIndex(a1, svg2.GetChildCount() - 1);
		});
	}

}